import React from 'react';
import { Box } from '@mui/material';

// Original breakpoint widths
const standardWidths = {
  xs: '100%',
  sm: 600,
  md: 960,
  lg: 1280,
  xl: 1920
};

// Extended breakpoint widths (adding 50px to each except xs)
const largeWidths = {
  xs: '100%',
  sm: 650, // 600 + 50
  md: 1010, // 960 + 50
  lg: 1330, // 1280 + 50
  xl: 1970, // 1920 + 50
};

const AdaptiveLayout = (props) => {
  const {
    backgroundColor = null,
    backgroundColorInner = '#ffffff',
    marginY = 0,
    paddingY = 0,
    paddingX = 0,
    centered = true,
    fullWidth = true,
    useInnerWrapper = true,
    children,
    ...otherProps
  } = props;

  // Define the inner wrapper Box as a constant
  const InnerBox = (
    <Box
      sx={{
        width: standardWidths,
        paddingY,
        paddingX,
        backgroundColor: backgroundColorInner,
      }}
    >
      {children}
    </Box>
  );

  return (
    <Box
      sx={{
        marginY,
        display: "flex",
        flexDirection: "column",
        alignItems: centered ? "center" : "flex-start",
        justifyContent: centered ? "center" : "flex-start",
        backgroundColor,
        width: fullWidth ? "100%" : "auto",
        ...(useInnerWrapper ? {} : { paddingY, paddingX }),
      }}
      {...otherProps}
    >
      {useInnerWrapper ? InnerBox : children}
    </Box>
  );
};

// Large version with extended widths
export const AdaptiveLayoutLarge = (props) => {
  const {
    backgroundColor = null,
    backgroundColorInner = '#ffffff',
    marginY = 0,
    paddingY = 0,
    paddingX = 0,
    centered = true,
    fullWidth = true,
    useInnerWrapper = true,
    children,
    ...otherProps
  } = props;

  // Define the inner wrapper Box with larger widths
  const InnerBox = (
    <Box
      sx={{
        width: largeWidths, // Using the extended widths
        paddingY,
        paddingX,
        backgroundColor: backgroundColorInner,
      }}
    >
      {children}
    </Box>
  );

  return (
    <Box
      sx={{
        marginY,
        display: "flex",
        flexDirection: "column",
        alignItems: centered ? "center" : "flex-start",
        justifyContent: centered ? "center" : "flex-start",
        backgroundColor,
        width: fullWidth ? "100%" : "auto",
        ...(useInnerWrapper ? {} : { paddingY, paddingX }),
      }}
      {...otherProps}
    >
      {useInnerWrapper ? InnerBox : children}
    </Box>
  );
};

export default AdaptiveLayout;